<template>
	<view class="personal_data_container">
		<view class="personal_data_box">
			<view class="data_avatar_box">
				<view class="data_avatar">
					<image :src="personMsgObj.small_shop_image ? personMsgObj.small_shop_image : defaultAvatar" mode=""
						class="avatar">
					</image>
				</view>
				<view class="avatar_input_box">
					<view class="avatar_input">
						<view style="padding-right: 35rpx; font-family: all-font;">
							更改头像
						</view>
					<!-- 	<view class="" style="position: absolute;top: -22rpx;left: 0; opacity: 0;">
							<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">获取</button>
						</view> -->
						<view class="avatar_input_icon_box">
							<image :src="iconEdit" mode="" class="avatar_input_icon"></image>
						</view>
					</view>
					<view class="avatar_icon_all">
						<view class="upload_box">
							<u-upload ref="uUpload" :action="action" :header="{ authorization: token, platform: 2 }"
								:file-list="fileListNew" max-count="1" :before-upload="beforeUpload"
								:form-data="{type: '11'}" name="file" @on-change="handlerUploadImg($event)"></u-upload>
						</view>
					</view>
				</view>
			</view>

			<!-- 			<view class="nickname_box">
				<view class="nickname_title">
					昵称
				</view>
				<view class="nickname_input_box">
					<view class="nickname_input">
						<u-input v-model="personMsgObj.nick" placeholder="更改昵称" :border="false" :clearable="false" />
					</view>
					<view class="nickname_icon_box">
						<image src="/static/personalData/icon-edit.png" mode="" class="nickname_icon"></image>
					</view>
				</view>
			</view>

			<view class="nickname_box">
				<view class="nickname_title">
					真实姓名
				</view>
				<view class="nickname_input_box">
					<view class="nickname_input">
						<u-input v-model="personMsgObj.name" placeholder="更改姓名" :border="false" :clearable="false" />
					</view>
					<view class="nickname_icon_box">
						<image src="/static/personalData/icon-edit.png" mode="" class="nickname_icon"></image>
					</view>
				</view>
			</view>

			<view class="phone_box">
				<view class="phone_title">
					登录手机号
				</view>
				<view class="phone_num">
					{{ personMsgObj.phone }}
				</view>
			</view>

			<view class="save_btn_box" @click="handlerSave">
				保存
			</view> -->
		</view>
	</view>
</template>

<script>
	import imageUrl from '@/utils/imgUrl.js'
	export default {
		data() {
			return {
				nicknameValue: '', // 昵称
				realnameValue: '', // 真实姓名
				action: 'https://saler.jkcae.com/app/api/uploadFiles',
				uploadImgUrl: '', // 上传图片url
				fileListNew: [],
				personMsgObj: {},
				defaultAvatar: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836e814b6c5_1719889537.jpg',
				token: uni.getStorageSync('h5-token'),
				imgUploadUrl: '',
					iconEdit: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66c9806caeb4f_1724481644.png'
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {
			this.imgUploadUrl = imageUrl.uploadImgUrl
		},
		methods: {
			// 获取头像
			// onChooseAvatar(e) {
			// 	console.log('获取头像', e)
			// 	this.personMsgObj.small_shop_image = e.detail.avatarUrl
			// 	this.personMsgObj.avatar = e.detail.avatarUrl
			// 	this.updateSmallShopImage()
			// },

			beforeUpload(index, list) {
			
			},

			// 获取用户信息
			getUserInfo() {
				this.$request('/api/getFxuserLoginInfo', {}, 'GET').then(res => {
					if (res.code == 1) {
						this.personMsgObj = res.data
					} else {
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 修改用户信息
			updateSmallShopImage() {
				this.$request('/api/updateSmallShopImage', {
					small_shop_image: this.personMsgObj.avatar
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改头像成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: '修改头像失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 上传图片
			handlerUploadImg(e) {
				const that = this
				if (e.statusCode == 200) {
					const uploadData = JSON.parse(e.data)
					// this.uploadImgUrl = uploadData.data
					let userInfo = uni.getStorageSync('userInfo')
					this.personMsgObj.avatar = uploadData.data.path
					userInfo.avatar = uploadData.data.path
					uni.setStorageSync('userInfo', userInfo)
					this.updateSmallShopImage()
				}
			},

			// 保存
			handlerSave() {
				this.editUser()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal_data_container {
		padding: 16rpx 20rpx 0;

		.personal_data_box {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 48rpx 40rpx 134rpx;

			.data_avatar_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F0F0F0;
				padding-bottom: 32rpx;

				.data_avatar {
					width: 96rpx;
					height: 96rpx;

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.avatar_input_box {
					position: relative;
					display: flex;
					align-items: center;
					// width: 196rpx;

					.avatar_input {
						position: relative;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;

						.avatar_input_icon_box {
							width: 28rpx;
							height: 28rpx;

							.avatar_input_icon {
								width: 100%;
								height: 100%;
							}
						}
					}

					.avatar_icon_all {

						.avatar_icon_box {
							width: 28rpx;
							height: 28rpx;

							.avatar_icon {
								width: 100%;
								height: 100%;
							}
						}

						.upload_box {
							position: absolute;
							top: -38rpx;
							right: -14rpx;
							opacity: 0;

							::v-deep .u-add-wrap {
								width: 200rpx !important;
								height: 100rpx !important;
							}
						}
					}

				}
			}

			.nickname_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F0F0F0;
				padding: 26rpx 0 32rpx;

				.nickname_title {
					font-size: 32rpx;
					font-weight: 400;
					color: #000000;
				}

				.nickname_input_box {
					display: flex;
					align-items: center;

					.nickname_input {
						width: 160rpx;
					}

					.nickname_icon_box {
						width: 28rpx;
						height: 28rpx;

						.nickname_icon {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.phone_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F0F0F0;
				padding: 26rpx 0 32rpx;

				.phone_title {
					font-size: 32rpx;
					font-weight: 400;
					color: #000;
				}

				.phone_num {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}
			}

			.save_btn_box {
				width: 100%;
				height: 70rpx;
				border-radius: 60rpx;
				background: #4F96FF;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 70rpx;
				text-align: center;
				color: #fff;
				margin-top: 362rpx;
			}
		}
	}
</style>